<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理系统</title>
    <link rel="stylesheet" href="all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 登录表单 -->
    <div id="login-form" class="login-container">
        <div class="login-form">
            <h2 class="login-title">博客管理系统</h2>
            <div class="form-group">
                <label for="password" class="form-label">密码</label>
                <input type="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
            <button id="login-btn" class="btn btn-primary w-100">登录</button>
        </div>
    </div>

    <!-- 管理内容 -->
    <div id="admin-content" style="display: none;">
        <div class="container">
            <!-- 侧边栏 -->
            <aside class="sidebar hidden">
                <a href="#" class="logo"><i class="fas fa-blog"></i> 博客管理</a>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#" class="nav-link active" data-target="site-config-panel"><i class="fas fa-cog"></i>
                            站点配置</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" data-target="partition-panel"><i class="fas fa-layer-group"></i>
                            分区管理</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" data-target="blog-panel"><i class="fas fa-file-alt"></i> 博客管理</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" data-target="works-panel"><i class="fas fa-briefcase"></i>
                            Works管理</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" data-target="generate-panel"><i class="fas fa-magic"></i> 生成内容</a>
                    </li>
                </ul>
                <div class="user-info">
                    <button id="logout-btn" class="btn btn-secondary btn-sm mt-2 w-100">退出登录</button>
                </div>
            </aside>

            <!-- 主内容区 -->
            <main class="main-content hidden">
                <div class="header">
                    <h1 class="title">博客管理系统</h1>
                    <div>
                        <button id="new-post-btn" class="btn btn-primary"><i class="fas fa-plus"></i> 新建帖子</button>
                    </div>
                </div>

                <!-- 选项卡 -->
                <div class="tabs">
                    <div class="tab active" data-target="site-config-panel">站点配置</div>
                    <div class="tab" data-target="partition-panel">分区管理</div>
                    <div class="tab" data-target="blog-panel">博客管理</div>
                    <div class="tab" data-target="works-panel">Works管理</div>
                    <div class="tab" data-target="generate-panel">生成内容</div>
                </div>

                <!-- 站点配置面板 -->
                <div id="site-config-panel" class="tab-content active">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">基本设置</h2>
                        </div>
                        <div class="card-body">
                            <form id="site-config-form">
                                <div class="form-group">
                                    <label for="site-title" class="form-label">网站标题</label>
                                    <input type="text" id="site-title" class="form-control" placeholder="请输入网站标题">
                                </div>
                                <div class="form-group">
                                    <label for="site-description" class="form-label">网站描述</label>
                                    <textarea id="site-description" class="form-control"
                                        placeholder="请输入网站描述"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="site-author" class="form-label">网站作者</label>
                                    <input type="text" id="site-author" class="form-control" placeholder="请输入网站作者">
                                </div>
                                <div class="form-group">
                                    <label for="site-keywords" class="form-label">网站关键词</label>
                                    <input type="text" id="site-keywords" class="form-control"
                                        placeholder="请输入网站关键词，用逗号分隔">
                                </div>
                                <div class="form-group">
                                    <label for="site-logo" class="form-label">网站Logo</label>
                                    <input type="text" id="site-logo" class="form-control" placeholder="请输入Logo图片URL">
                                </div>
                                <div class="form-group">
                                    <label for="site-url" class="form-label">网站URL</label>
                                    <input type="text" id="site-url" class="form-control" placeholder="请输入网站URL">
                                </div>
                                <div class="form-group">
                                    <label for="site-about" class="form-label">关于信息</label>
                                    <textarea id="site-about" class="form-control" placeholder="请输入关于信息"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="site-interests" class="form-label">兴趣爱好</label>
                                    <input type="text" id="site-interests" class="form-control"
                                        placeholder="请输入兴趣爱好，用逗号分隔">
                                </div>
                                <div class="form-group">
                                    <label for="site-self-introduction" class="form-label">自我介绍</label>
                                    <textarea id="site-self-introduction" class="form-control"
                                        placeholder="请输入自我介绍"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="site-skills" class="form-label">技能标签</label>
                                    <input type="text" id="site-skills" class="form-control"
                                        placeholder="请输入技能标签，用逗号分隔">
                                </div>
                                <button type="submit" class="btn btn-primary">保存设置</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 分区管理面板 -->
                <div id="partition-panel" class="tab-content">
                    <div class="header">
                        <h2 class="title">分区管理</h2>
                        <button id="add-partition-btn" class="btn btn-secondary"><i class="fas fa-plus"></i>
                            添加分区</button>
                    </div>
                    <div id="partition-list" class="partition-list"></div>
                </div>

                <!-- 博客管理面板 -->
                <div id="blog-panel" class="tab-content">
                    <div class="header">
                        <h2 class="title">博客管理</h2>
                    </div>
                    <div id="blog-list" class="blog-list"></div>
                </div>

                <!-- Works管理面板 -->
                <div id="works-panel" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Works管理</h2>
                            <button id="add-work-btn" class="btn btn-secondary"><i class="fas fa-plus"></i>
                                添加Works</button>
                        </div>
                        <div class="card-body">
                            <div id="works-list"></div>
                        </div>
                    </div>
                </div>

                <!-- 生成内容面板 -->
                <div id="generate-panel" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">生成静态内容</h2>
                        </div>
                        <div class="card-body">
                            <p>点击下方按钮生成对应的静态内容：</p>
                            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
                                <button id="generate-index" class="btn btn-primary"><i class="fas fa-home"></i>
                                    生成首页</button>
                                <button id="generate-posts" class="btn btn-secondary"><i class="fas fa-file-alt"></i>
                                    生成帖子</button>
                                <button id="generate-partitions" class="btn btn-secondary"><i
                                        class="fas fa-layer-group"></i> 生成分区</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 反馈弹窗样式 -->
                <style>
                    .feedback-modal {
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
                    }

                    .feedback-modal i {
                        display: block;
                        margin: 0 auto;
                    }

                    /* 右下角提示框样式 */
                    .toast {
                        display: flex;
                        align-items: center;
                        padding: 12px 16px;
                        border-radius: 8px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                        font-size: 14px;
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                        max-width: 300px;
                        background-color: white;
                    }

                    .toast-icon {
                        margin-right: 12px;
                        font-size: 18px;
                    }

                    .toast-message {
                        flex: 1;
                        word-wrap: break-word;
                    }

                    .toast-close {
                        background: none;
                        border: none;
                        font-size: 16px;
                        cursor: pointer;
                        padding: 0;
                        margin-left: 12px;
                        color: #666;
                    }

                    .toast-close:hover {
                        color: #333;
                    }

                    /* 不同类型的提示框样式 */
                    .toast-success {
                        border-left: 4px solid #28a745;
                    }

                    .toast-success .toast-icon {
                        color: #28a745;
                    }

                    .toast-error {
                        border-left: 4px solid #dc3545;
                    }

                    .toast-error .toast-icon {
                        color: #dc3545;
                    }

                    .toast-warning {
                        border-left: 4px solid #ffc107;
                    }

                    .toast-warning .toast-icon {
                        color: #ffc107;
                    }

                    .toast-info {
                        border-left: 4px solid #17a2b8;
                    }

                    .toast-info .toast-icon {
                        color: #17a2b8;
                    }

                    .toast-loading {
                        border-left: 4px solid #6c757d;
                    }

                    .toast-loading .toast-icon {
                        color: #6c757d;
                    }
                </style>
            </main>
        </div>
    </div>

    <!-- 分区编辑模态框 -->
    <div id="partition-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="partition-modal-title">添加分区</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="partition-form">
                    <input type="hidden" id="partition-id">
                    <div class="form-group">
                        <label for="partition-title" class="form-label">分区标题</label>
                        <input type="text" id="partition-title" class="form-control" placeholder="请输入分区标题">
                    </div>
                    <div class="form-group">
                        <label for="partition-description" class="form-label">分区描述</label>
                        <textarea id="partition-description" class="form-control" placeholder="请输入分区描述"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary close-modal">取消</button>
                <button class="btn btn-primary" onclick="savePartition()">保存</button>
            </div>
        </div>
    </div>

    <!-- 帖子编辑器模态框 -->
    <div id="post-editor-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">编辑帖子</h3>
                <div style="display: flex; gap: 0.5rem;">
                    <button id="delete-current-post" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                    <button id="close-editor" class="close-modal">&times;</button>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="edit-post-title" class="form-label">帖子标题</label>
                    <input type="text" id="edit-post-title" class="form-control" placeholder="请输入帖子标题">
                </div>
                <div class="form-group">
                    <label for="edit-post-author" class="form-label">作者</label>
                    <input type="text" id="edit-post-author" class="form-control" placeholder="请输入作者名称">
                </div>
                <div class="form-group">
                    <label for="edit-post-time" class="form-label">发布时间</label>
                    <input type="date" id="edit-post-time" class="form-control">
                </div>
                <div class="form-group">
                    <label for="edit-post-partition" class="form-label">分区</label>
                    <select id="edit-post-partition" class="form-control"></select>
                </div>
                <div class="form-group">
                    <label for="edit-post-tags" class="form-label">标签</label>
                    <input type="text" id="edit-post-tags" class="form-control" placeholder="请输入标签，用逗号分隔">
                </div>
                <div class="post-editor-tabs">
                    <div id="editor-tab" class="editor-tab active">编辑器</div>
                    <div id="preview-tab" class="preview-tab">预览</div>
                </div>
                <div id="editor-content">
                    <textarea id="edit-post-content" class="form-control" style="min-height: 300px;"
                        placeholder="请输入帖子内容（支持Markdown）"></textarea>
                </div>
                <div id="preview-content"></div>
            </div>
            <div class="modal-footer">
                <button id="close-editor-btn" class="btn btn-secondary close-modal">关闭</button>
                <button id="save-post" class="btn btn-primary">保存帖子</button>
            </div>
        </div>
    </div>

    <!-- Works编辑模态框 -->
    <div id="work-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="work-modal-title">添加Works</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="work-form">
                    <input type="hidden" id="work-id">
                    <div class="form-group">
                        <label for="work-title" class="form-label">作品标题</label>
                        <input type="text" id="work-title" class="form-control" placeholder="请输入作品标题">
                    </div>
                    <div class="form-group">
                        <label for="work-description" class="form-label">作品描述</label>
                        <textarea id="work-description" class="form-control" placeholder="请输入作品描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="work-link" class="form-label">作品链接</label>
                        <input type="text" id="work-link" class="form-control" placeholder="请输入作品链接">
                    </div>
                    <div class="form-group">
                        <label for="work-image" class="form-label">作品图片</label>
                        <input type="text" id="work-image" class="form-control" placeholder="请输入作品图片URL">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary close-modal">取消</button>
                <button class="btn btn-primary" onclick="saveWork()">保存</button>
            </div>
        </div>
    </div>

    <script src="auth.js"></script>
    <script src="siteConfig.js"></script>
    <script src="partition.js"></script>
    <script src="blog.js"></script>
    <script src="works.js"></script>
    <script src="common.js"></script>
    <script src="script.js"></script>
</body>

</html>